/**
 * 20220304:rewrite...jordia
 */
import React from 'react';

/**
 * show progress,animation... when loading assets
 * @property {string} loadingSrc
 * @property {string} message
 */
export default class UILoading extends React.PureComponent{
    constructor(props,context){
        super(props,context);
    }

    set progress(num){
        this._prgRef.current.style.width=Math.round(num*100)+'%';
        switch(num){
            case 0:
                this._containerRef.current.style.display='flex';
                break;
            case 1:
                this._containerRef.current.style.display='none';
                break;
            default:
        }
    }

    set message(str){
        this._textRef.current.innerText=str;
    }

    render(){
        return (
            <div ref={this._containerRef=this._containerRef||React.createRef()}
                style={{position:'fixed',display:'flex',flexDirection:'column',alignItems:'center',justifyContent:'center',left:'0',top:'0',right:'0',bottom:'0',backgroundColor:'#333333',zIndex:'1000'}}
            >
                <div key='imgCnr'>
                    <img src={this.props.loadingSrc} 
                        style={{width:'8rem',height:'8rem',borderRadius:'4rem'}}
                    />
                </div>
                <div key='msgCnr' style={{fontSize:'1rem',color:'#cecece'}}>
                    <span ref={this._textRef=this._textRef||React.createRef()}>{this.props.message||'wait...'}</span>
                </div>
                <div key='barCnr'
                    style={{position:'relative',display:'flex',flexDirection:'row',alignItems:'left',justifyContent:'left',width:'10rem',height:'0.5rem',backgroundColor:'rgba(0,20,50,0.8)'}}
                >
                    <div ref={this._prgRef=this._prgRef||React.createRef()}
                        style={{width:'1%',height:'0.5rem',backgroundColor:'rgba(255,255,255,0.8)'}}
                    />
                </div>
            </div>
        );
    }

}